<template>
    <el-dialog v-if="outerVisible" :close-on-click-modal='false' title="批量设置标题" :visible.sync="outerVisible" @close="resetForm('batchAddTitleRef')" width="600px">
        <el-dialog :close-on-click-modal='false' :append-to-body="true" title="创意词包" :visible.sync="innerVisible" width="500px">
            <el-table :data="keyWordList" class="com_table" height="400px">
                <el-table-column prop="name" label="词包">
                </el-table-column>
                <el-table-column prop="default_word" label="默认词">
                </el-table-column>
                <el-table-column prop="" label="用户覆盖率">
                </el-table-column>
                <el-table-column prop="name" label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" :underline="false" @click="addWrodKey(scope.row)">插入</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        
        <el-form label-position="top" label-width="auto" size="medium" :hide-required-asterisk='true' :model="batchAddTitleForm" :rules="batchAddTitleRules" ref="batchAddTitleRef">
            <el-form-item label="" prop="title" style="margin-bottom:0">
                <el-popover placement="bottom" width="540" trigger="click">
                    <div class="flexbox flexcenter flexbetween">
                        <div class="flexbox flexcenter">
                            <span>插入动态词包：</span>
                            <el-link :underline="false" class="ml_12" type="primary" @click="addWrodKey(word)" v-for="(word,windex) in keyWordFour" :key="windex">+{{word.name}}</el-link>
                        </div>
                        <el-link :underline="false" type="primary" @click="innerVisible=true">+更多</el-link>
                    </div>
                    <el-input slot="reference" @change="changeWordInfo(item,index)" clearable v-model="batchAddTitleForm.title" maxlength="55" show-word-limit placeholder="请输入内容" size="small"></el-input>
                </el-popover>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetForm('batchAddTitleRef')" class="el-button-width" size="small">取 消</el-button>
            <el-button type="primary" @click="submitForm('batchAddTitleRef')" class="el-button-width" size="small" :disabled="loading" :loading="loading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: ["keyWordFour", "keyWordList"],
    name: "",
    data() {
        var checkTitleValue = (rule, value, callback) => {
            // let ref2 = /(?<=\{)(.+?)(?=\})/g;
            let wordList = this.keyWordList;
            let arr = [];
            let arrAll = []
            let ref2 = /\{(.+?)\}/g;//获取花括号里面的内容-全局
            let ref = /\{(.+?)\}/; //获取花括号里面的内容
            let con = value.replace(/[^\{^\}]/g,'')
            let left = []
            let right = []
            let str = value.match(ref2);
            for(let i in con){
                if(con[i]==='{'){
                    left.push(con[i])
                }else{
                    right.push(con[i])
                }
            }
            for(let i in str){
                let text = str[i].match(ref)
                arrAll.push(text[1])
            }
            for (let i in arrAll) {
                for (let a in wordList) {
                    if (arrAll[i] == wordList[a].name) {
                        arr.push({
                            word_id: wordList[a].creative_word_id,
                            dict_name: wordList[a].name,
                            default_word: wordList[a].default_word,
                        });
                    }
                }
            }
            let flag= arrAll.every((a)=>{
                return wordList.some(b => a == b.name)
            })
            let flag2 = left.length==right.length
            if(!flag){
                return callback(new Error("输入的动态词包不存在"));
            }else if(!flag2){
                return callback(new Error("标题不允许带有{的符号"));
            }else if (arr.length > 2) {
                return callback(new Error("最多只能插入2个创意包"));
            } else {
                callback();
            }
        };
        return {
            disabled: false,
            outerVisible: false,
            innerVisible:false,
            type:null,
            batchAddTitleForm: {
                title: "",
                dynamic_words: [],
            },
            batchAddTitleRules: {
                title: [
                    {required: true, message: '请输入', trigger: ['blur', 'change']},
                    { min: 5, max: 55, message: '长度在 5 到 55 个字符', trigger: ['blur', 'change']},
                    { validator: checkTitleValue, trigger: ["blur", "change"] },
                ],
            },
        };
    },

    created() {
        this.$bus.on("batchAddTitle", (value) => {
            this.outerVisible = value.dialogVsb;
            this.type = value.type;
        });
    },
    beforeDestroy() {
        this.$bus.off("batchAddTitle");
    },
    methods: {
        // 添加创意词包-自定义
        addWrodKey(word) {
            if (this.batchAddTitleForm.dynamic_words.length >= 2) {
                this.$message.error("最多只能插入2个创意包");
                return;
            } else {
                this.batchAddTitleForm.title += "{" + word.name + "}";
                this.batchAddTitleForm.dynamic_words.push({
                    word_id: word.creative_word_id,
                    dict_name: word.name,
                    default_word: word.default_word,
                });
            }
            this.innerVisible = false
        },

        //创意词包验证-自定义
        changeWordInfo() {
            let wordList = this.keyWordList;
            let arr = [];
            let arrAll = [];
            let ref2 = /\{(.+?)\}/g;
            let ref = /\{(.+?)\}/;
            let str = this.batchAddTitleForm.title.match(ref2);
            for (let i in str) {
                let text = str[i].match(ref);
                arrAll.push(text[1]);
            }
            for (let i in wordList) {
                for (let a in arrAll) {
                    if (wordList[i].name == arrAll[a]) {
                        if (arr.length >= 2) {
                            return;
                        } else {
                            arr.push({
                                word_id: wordList[i].creative_word_id,
                                dict_name: wordList[i].name,
                                default_word: wordList[i].default_word,
                            });
                        }
                    }
                }
            }
            this.batchAddTitleForm.dynamic_words = arr;
        },

        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.loading = true;
                    if(this.type==1){
                        for(let i in this.$parent.createform.creattitle.title){
                            if(!this.$parent.createform.creattitle.title[i].title){
                                this.$parent.createform.creattitle.title[i].title = this.batchAddTitleForm.title
                                this.$parent.createform.creattitle.title[i].dynamic_words = this.batchAddTitleForm.dynamic_words
                            }
                        }
                    }else if(this.type==2){
                        for(let i in this.$parent.createform.creatinfo.creative){
                            if(!this.$parent.createform.creatinfo.creative[i].title){
                                this.$parent.createform.creatinfo.creative[i].title=this.batchAddTitleForm.title
                                this.$parent.createform.creatinfo.creative[i].dynamic_words=this.batchAddTitleForm.dynamic_words
                            }
                        }
                    }

                    this.$parent.sessionSave();
                    this.resetForm('batchAddTitleRef')
                    this.loading = false;
                } else {
                    this.loading = false;
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.batchAddTitleForm.dynamic_words = []
            this.outerVisible = false;
        },
    },
};
</script>
<style scoped>
</style>

